<template>
	<el-tab-pane label="换房申请历史记录" name="changeRoomHistory">
		<div>
			<el-row class="header">
				<el-col :span="9">
					<el-row :gutter="10">
						<el-col :span="8">
							<span>学号：</span>
							<el-input v-model.number="stuId" />
						</el-col>
						<el-col :span="8">
							<el-button class="btn" @click="submitSearch"
								><el-icon><Search /></el-icon> 查询</el-button
							>
						</el-col>
						<el-col :span="8">
							<el-button class="btn" @click="resetSearch">重置</el-button>
						</el-col>
					</el-row>
				</el-col>
			</el-row>

			<div class="table">
				<el-table
					:data="changeRoomInfo || changeRoom"
					:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
					:row-style="tableRowClassName">
					<el-table-column prop="stuName" label="姓名" />
					<el-table-column prop="stuId" label="学号" />
					<el-table-column prop="professional" label="专业" />
					<el-table-column prop="college" label="学院" />
					<el-table-column prop="oldRoom" label="原寝室" />
					<el-table-column prop="newRoom" label="新寝室" />
					<el-table-column prop="reason" label="申请理由" />
					<el-table-column prop="phone" label="电话" />
					<el-table-column prop="status" label="是否通过">
						<template #default="{ row }">
							<span :style="{ color: row.status === '通过' ? 'blue' : 'red' }">{{ row.status }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template #default="{ row }">
							<el-button link type="danger" @click="handleDele(row)">删除记录</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!-- 分页 -->
			<el-row class="pagination">
				<el-pagination
					v-model:current-page="currentPage"
					v-model:page-size="pageSize"
					:page-sizes="pageSizes"
					small="small"
					:background="true"
					layout="total, sizes, prev, pager, next"
					:total="total"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</el-row>
		</div>
	</el-tab-pane>
</template>

<script setup>
import { Search } from '@element-plus/icons'
import { ref, reactive } from 'vue'
import { queryExchangeInfoAll, queryExchangeInfoStu, deleteExcahngeInfoByHou } from '@/utils/axios/domiRequests'

import { getExchangeInfoBuild } from '@/utils/axios/getTotal'
import useRegStore from '@/stores/useReg'
import { debounce } from '@/utils/tools'

const { handleCheckId } = useRegStore()

const props = defineProps(['total', 'changeRoomInfo'])
const $emit = defineEmits(['search'])

const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = reactive([10, 20, 30])

// 查询id
const stuId = ref()

const changeRoom = ref()

// 处理删除
const handleDele = async (val) => {
	await deleteExcahngeInfoByHou(val)
	await init()
}

// 处理搜索请求
const submitSearch = debounce(async () => {
	// 判断搜索条件是否合法
	if (!handleCheckId(stuId.value)) return
	let { data } = await queryExchangeInfoStu({ stuId: stuId.value, currentPage: 1 })
	$emit('search', { data })
})

const handleSizeChange = async (val) => {
	let { data } = await queryExchangeInfoAll({
		currentPage: currentPage.value,
		pageSize: val,
	})
	changeRoom.value = data
}
const handleCurrentChange = async (val) => {
	let { data } = await queryExchangeInfoAll({
		currentPage: val,
		pageSize: pageSize.value,
	})
	changeRoom.value = data
}

async function init(currentPage, pageSize) {
	let { data } = await queryExchangeInfoAll({
		currentPage: currentPage,
		pageSize: pageSize,
	})
	let res = await getExchangeInfoBuild()
	$emit('search', { data, tota: res.data })
}

// 重置
const resetSearch = () => {
	init(currentPage.value, pageSize.value).then(() => (stuId.value = ''))
}

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}
</script>

<style scoped lang="scss">
.el-input {
	width: 100px;
}

.header {
	margin-block: 20px;
}

.pagination {
	position: absolute;
}

.btn {
	background: rgb(0, 202, 237);
	color: #ffff;
}
</style>
